// 5种找元素方法
// 1 通过标签名获取所有的元素，是一个集合
let collectionLi = document.getElementsByTagName('li')
for (let item of collectionLi) {
  console.log(item)
  // 节点名称 标签名大写 LI
  console.log(item.nodeName)
  // 节点类型 数字 1表示元素节点
  console.log(item.nodeType)
  // 节点值 如果是文本才有 null
  console.log(item.nodeValue)
}
let list = Array.from(collectionLi)
console.log(list[0] === collectionLi[0]) // true

// 2 通过类名获取所有元素，是一个集合
let collectionList = document.getElementsByClassName('list')
for (let i = 0; i < collectionList.length; i++) {
  console.log(collectionList[i].innerHTML)
}

// 3 通过id获得页面的元素，只能获得一个
let listId = document.getElementById('li2')
console.log(listId === li2) // true
// 设置了id的元素，id的值可以直接找到此元素,不能滥用此方法，因为规范要求变量先声明后使用
console.log(li2.innerHTML) // li2是id的值，就是要找的li元素
// <a href = "https://www.sina.com.cn" > 新浪</a>

// 4 通过querySeletor(selector)获得元素对象，可以通过类名，标签名，id获得元素,css选择器查找元素 只找第一个
let ul = document.querySelector('ul>li>a')
console.log(ul)

// 5 querySelectorAll(selector)通过选择器找元素，找所有符合条件的元素
let uls = document.querySelectorAll('ul')
console.log(uls)

/*
  document.getElementsByTagName() // n
  document.getElementsByClassName() // n
  document.getElementById() // 1
  document.querySelector() // 1
  document.querySelectorAll() // n
*/
